<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瀑布流</title>
</head>
<style>
    #box {
        width: 90%;
        margin: 0 auto;
        position: relative;
    }

    .item {
        border: 1px solid salmon;
        box-sizing: border-box;
        position: absolute;
        width: 220px;
    }

    img {
        width: 100%;
        display: block;
    }
</style>

<body>
    <div id="box">
        <div class="item"><img src="./img/bg.jpg" alt="" /></div>
        <div class="item"><img src="./img/birthday.png" alt="" /></div>
        <div class="item"><img src="./img/img1.jpg" alt="" /></div>
        <div class="item"><img src="./img/img2.jpg" alt="" /></div>
        <div class="item"><img src="./img/img3.jpg" alt="" /></div>
        <div class="item"><img src="./img/img4.jpg" alt="" /></div>
        <div class="item"><img src="./img/img5.jpg" alt="" /></div>
        <div class="item"><img src="./img/img6.jpg" alt="" /></div>
        <div class="item"><img src="./img/img7.jpg" alt="" /></div>
        <div class="item"><img src="./img/img8.jpg" alt="" /></div>
        <div class="item"><img src="./img/birthday.png" alt="" /></div>
        <div class="item"><img src="./img/img2.jpg" alt="" /></div>
        <div class="item"><img src="./img/img8.jpg" alt="" /></div>
        <div class="item"><img src="./img/bg.jpg" alt="" /></div>
        <div class="item"><img src="./img/img1.jpg" alt="" /></div>
        <div class="item"><img src="./img/img4.jpg" alt="" /></div>
        <div class="item"><img src="./img/img6.jpg" alt="" /></div>
    </div>
</body>
<script>
    var oBox = document.getElementById('box');
    var oItems = oBox.children;
    // console.log(oItems[0].offsetWidth);
    var gap = 10;

    function waterFall() {
        // var winWidth = getClient().clientWidth;
        // oBox.style.width = winWidth * 0.9 + 'px';
        // console.log(oBox.offsetWidth);
        var itemWidth = oItems[0].offsetWidth
        var cols = parseInt(oBox.offsetWidth / (itemWidth + 10));
        //    console.log(cols)
        var arr = []
        for (var i = 0; i < oItems.length; i++) {
            if (i < cols) {
                oItems[i].style.top = 0;
                oItems[i].style.left = (itemWidth + 10) * i + 'px';
                arr.push(oItems[i].offsetHeight);
            } else {
                var minHeight = Math.min(...arr);
                var minIndex = arr.indexOf(minHeight);
                oItems[i].style.top = arr[minIndex] + gap + 'px';
                oItems[i].style.left = oItems[minIndex].offsetLeft + 'px'
                arr[minIndex] += oItems[i].offsetHeight + gap;
            }
        }
    }
    window.onload = function () {
        waterFall();
    }
    window.onresize = function () {
        waterFall()
    }

    window.onscroll = function () {
        if (getScorllTop() + getClient().clientHeight >= oItems[oItems.length - 1].offsetTop) {
            var datas = [
                './img/img4.jpg',
                './img/img6.jpg',
                './img/img5.jpg',
                './img/img3.jpg',
                './img/img7.jpg',
                './img/bg.jpg',
                './img/birthday.png'
            ]
            const fragment = document.createDocumentFragment();
            for (let i = 0; i < datas.length; i++) {
                var oDiv = document.createElement('div');
                oDiv.classList = 'item';
                oDiv.innerHTML = ` <img src="${datas[i]}" alt="" />`
                fragment.appendChild(oDiv);
            }
            oBox.appendChild(fragment);
            waterFall()
        }
    }

    function getClient() {
        return {
            clientWidth: document.documentElement.clientWidth || document.body.clientWidth || window.innerHeight,
            clientHeight: document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight
        }
    }

    function getScorllTop() {
        return window.pageYOffset || document.documentElement.scrollTop;
    }
</script>

</html>